<template>
	<view class="page">
		<!-- <u-button type="primary" text="query 日程" @click="query"></u-button> -->
		<view class="" v-for="(item,index) in data" :key="index">
			<view class="time">
				<u-tag :text="item.time" type="warning" size="mini" icon="clock-fill"></u-tag>
			</view>
			<view class="title">
				{{item.title}}
			</view>
		</view>
		<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
		<u-loading-page loading-mode="spinner" :loading="loading" loading-text="正在获取..." :line="true"></u-loading-page>
	</view>
</template>

<script>
	import {
		queryEvent
	} from '@/utils/android-calendars.js'
	export default {
		data() {
			return {
				loading: true,
				data: [],
				totalData: [],
				rows: 10, //每页展示条数
				pages: 1,
				showLoading: false,
				status: 'loading',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			}
		},
		onLoad() {
			uni.startPullDownRefresh();
		},
		onReachBottom() {
			this.status = 'loading';
			const start = this.pages * this.rows
			const end = (this.pages + 1) * this.rows > this.totalData.length ? (this.pages + 1) * this.rows : this
				.totalData.length
			setTimeout(() => {
				if (start >= this.totalData.length) {
					this.status = 'nomore';
					return
				} else {
					const temp = this.totalData.slice(start, end)
					this.data = [...this.data, ...temp]
					this.pages++
				}
			}, 1000)
		},
		onPullDownRefresh() {
			this.initData()
			setTimeout(() => {
				this.query()
			}, 100)
		},
		methods: {
			initData() {
				this.loading = true
				this.data = []
				this.totalData = []
				this.rows = 10
				this.pages = 1
				this.status = 'loadmore'
				this.loadingText = '努力加载中'
				this.loadmoreText = '轻轻上拉'
				this.nomoreText = '实在没有了'
			},
			async query() {
				const res = await queryEvent()
				console.log(res);
				let tempArr = []
				res.map(item => {
					let tempObj = {}
					tempObj.title = item.title
					tempObj.time = uni.$u.timeFormat(item.dtstart * 1, 'yyyy/mm/dd hh:MM')
					tempArr.push(tempObj)
				})
				setTimeout(() => {
					this.loading = false
					this.totalData = tempArr
					this.data = this.totalData.slice(0, this.rows)
					uni.stopPullDownRefresh();
				}, 500)
			},
		},
	}
</script>

<style lang="scss">
	.page {
		padding: 20rpx;
	}

	.time {
		width: 50%;
		margin-top: 40rpx;
	}

	.title {
		margin-top: 10rpx;
		padding: 10rpx;
		word-break: break-all;
		font-size: 28rpx;
		border-radius: 5rpx;
		border-radius: 5px;
		background: #eee;
		box-shadow: -4px -4px 4px #b5b5b5,
			4px 4px 4px #ffffff;
	}
</style>
